<template>
    <div class="card">
        <vant-switch v-model="checked" size="25"/>
        <div class="image" :style="{ 'background-image': `url(${image})` }"></div>
        <div class="info">
            <div class="title"><h3>{{ goodsInfo && goodsInfo.title }}</h3></div>
            <div class="footer">
                <span class="price">￥{{ goodsInfo && goodsInfo.sell_price }}</span>
                <Stepper min="1" :max="10" disable-input v-model="goodsCount"/>
                <Button type="info" size="small" plain hairline @click="deleteGoods">删除</Button>
            </div>
        </div>
    </div>
</template>

<script>
import { Switch, Stepper, Button } from 'vant';
import { getGoodsInfo } from '../services';

export default {
    components: { 'vant-switch': Switch, Stepper, Button },
    props: {
        id: {
            type: Number,
            required: true
        },
        count: {
            type: Number,
            required: true
        },
        selected: {
            type: Boolean,
            default: false
        },
        image: {
            type: String,
            default: 'https://images.mihuashi.com/2021/02/12/05/k9c4wtlcfa05xfd175rde3chgmw11rog/k9c4wtlcfa05xfd175rde3chgmw11rog.jpg'
        }
    },
    data() {
        return {
            goodsInfo: null
        };
    },
    computed: {
        checked: {
            get() {
                return this.selected;
            },
            set(value) {
                this.$store.commit('shopCart/update', { 
                    id: this.id, 
                    key: 'selected',
                    value
                });
            }
        },
        goodsCount: {
            get() {
                return this.count;
            },
            set(value) {
                this.$store.commit('shopCart/update', { 
                    id: this.id, 
                    key: 'count',
                    value
                });
            }
        }
    },
    methods: {
        // 删除商品
        deleteGoods() {
            this.$store.commit('shopCart/delete', this.id);
        }
    },
    created() {
        getGoodsInfo(this.id).then(goodsInfo => this.goodsInfo = goodsInfo);
    }
}
</script>

<style lang="less" scoped>
.card {
    box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    margin: 10px;
    .image {
        width: 70px;
        height: 90px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 5px;
        overflow: hidden;
        margin: 0 10px;
    }
    .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 90px;
        .title {
            flex: 1;
            h3 {
                margin: 0;
                font-size: 16px;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                overflow: hidden;
            }
        }
        .footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .price {
                font-weight: bold;
                color: red;
            }
            .van-button--small {
                height: 25px;
            }
        }
    }
}
</style>